<template>
 <div class="me">
   <top-header :isLeft="false" title="我的"> </top-header>
  <div class="me1">
   <div class="mine1" v-if="userList == ''">
      <button @click="$router.push({name:'Login'})">请先登录</button>
    </div>
    <div v-for="(item,index) in userList" :key="index" v-else>
      <div class="mine"  >
        <div class="user">
      <p class="username">{{item.nickname}}</p>
      <p> <span>{{item.sex}}  ·</span> <span style="margin:0 5px 0 10px ">{{item.create_time}}</span>加入</p>
      <p>{{item.content}}</p>
      </div>
      <div class="touxiang" @click="drawer = true">
         <img :src="item.icon2" id="icon" alt="这是头像">
      </div>
     
      </div>

  <div class="tar">
  <div @click="$router.push({name:'MyAttention'})">关注<span>{{nums}}</span></div>
  <div>
  <button @click="$router.push({name:'VegetableBasket'})">菜篮子</button>
  <button @click="$router.push({name:'Share'})" >分享</button>
  </div></div>
  </div>
   
   <div class="commonly-service">
        <b>常用功能</b>
        <service
          v-for="(item, index) in datas"
          :key="index"
         :serviceInfo='item'
        >
        </service>
      </div>
   </div> 
   <el-drawer

  :visible.sync="drawer"
  direction="btt"
  :before-close="handleClose"
  :with-header="false"
  style="text-align:center;font-size:18px;height:110%">
 <!-- <div @click="showimg()"><input  type="file" id="file" name="file" style="position:absolute; top:0px; right:80px; height:64px; filter:alpha(opacity:0);opacity: 0;width:260px "/>
  </div><div style="margin:20px 0 20px;background:white;z-index:1000" >上传头像</div>
  <hr> -->
  <p style="margin-top:20px" @click="$router.push({name:'BianJi'})">编辑资料</p>
  <hr >
  <p style="margin-top:20px" @click="Close() ">取消</p>
</el-drawer>
<!-- <div class="foot" v-show="show2 == 1">
  <div>
    <div class="img">
         <input type="hidden" name="img">
    <img src="" class="icon" id="icon"  alt="" style="width:200px;height:200px"></div>
  </div>

  <button @click="uploadFile" >确认</button>
</div> -->
    </div>
</template>

<script>
import upload from 'layui'
import Service from "../components/Service";
import $ from 'jquery'
import TopHeader from '../components/TopHeader.vue';
import QS from 'qs'
import addressUrl from "../assets/imgs/service/address.png";
import attentionUrl from "../assets/imgs/service/attention.png";
import setUrl from "../assets/imgs/service/set.png";
import legalUrl from "../assets/imgs/service/legal.png";
import orderUrl from "../assets/imgs/service/订单.png"
export default {
  components: { Service,TopHeader},
  data()
    {
    return{
      img:'',
      show2:'',
       drawer: false,
      nums:0,
      show:1,
      username:'',
      userList:'',
      url:'../assets/imgs/service/',
         datas: [   
            {
          imgUrl: orderUrl,
          name: "我的订单",
          path: "MyOrder",
        }, 
        {
          imgUrl: addressUrl,
          name: "我的收货地址",
          path: "MyshoppingAddress",
        },
        {
          imgUrl: attentionUrl,
          name: "我的收藏",
          path: "MyCollection",
        },
        {
            imgUrl: legalUrl,
          name: "我的作品",
          path: "MyWork",
        },
          {
         imgUrl: setUrl,
          name: "设置",
          path: "Set",
        },
      ],
    }
  },
  computed : {
     Service,
    TopHeader
  },
computed:{
  
},
mounted() {
  //  console.log(localStorage.name)
  // this.username = this.$store.getters.username;
  // console.log(this.username)
  // let params={
  //           username:this.username
  //         }
  //         this.$ajax.post('/mysql/loginselect.php',QS.stringify(params)).then((res)=>{
  //           console.log(res.data)
  //           this.userList = res.data
  //         })
},
created() {
  this.showNums()
 

 
},
methods: {
  uploadFile()
     {
      var hrr = "";

      const self = this;
      var file = document.getElementById("file").files[0]; //图片上传
      if (file == null || file == "") {
        alert("请选择要上传的图片！");
        return false;
      }
      var formData = new FormData();
      formData.append("file", file); //添加一个新值到FormData对象内的一个已存在的键中，如果键不存在则会添加该键
      $.ajax({
        url: "http://localhost/mysql/Upload.php", //目标
        type: "POST", //传值方式
        data: formData,
        dataType: "text", //返回类型
        async: false, //异步传输
        contentType: false, //告诉jQuery不要去设置Content-Type请求头
        cache: false, //每次读取的是最新的数据
        processData: false, //告诉jQuery不要去处理发送的数据
        success(res) {
          $("#icon").attr("src", res); //对图片路径进行赋值
          self.hrr = res;
          this.img = self.hrr
        },
      });

      console.log(typeof this.hrr);
    },
   
  // showimg(){
  //   this.drawer = false
  //   // this.show2 = 1
    
  //   this.$confirm('确认上传？')
  //         .then(_ => {
  //            uploadFile();
  //         })
  //         .catch(_ => {});

  // },
  Close(){
    this.drawer = false
  },
  handleClose(done) {
        // this.$confirm('确认关闭？')
        //   .then(_ => {
        //     done();
        //   })
        //   .catch(_ => {});
        done()
      },
  showNums(){
    //  console.log(this.num);
          this.$ajax.get('/mysql/nums.php',{
            params:{
              id:localStorage.id
            }
          }).then((res)=>{
          console.log(res)
       this.nums = res.data[0].nums
          });
        console.log(localStorage.name)
      setTimeout(() => {
        localStorage.clear()
        this.$router.go(0)
      },30*60*1000);
      if(localStorage.name ){
 let params={
            username:localStorage.name
          }
          this.$ajax.post('/mysql/loginselect.php',QS.stringify(params)).then((res)=>{
            console.log(res.data)
            this.userList = res.data
            console.log(this.userList)
        this.show = 0
        // localStorage.clear()
          })
      }
        
          
  },
  
},


}
</script>

<style lang="scss" scoped>
.me1{
  color: #000;
// margin-top: 60px;
margin: 60px 10px 0;
}.title{
    width: 100%;
    text-align: center;
}
.mine1{
  width: 100%;
  margin-top: 50px;
  height: 150px;
  position: relative;
  button{
    background: rgb(35, 35, 240);
    border: 0;
    color: white;
    width: 100px;
    height: 40px;
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  }
}
.mine{
  width: 100%;
  margin-top: 50px;
  display:flex;
  justify-content: space-between;
 .userchange{
   color: orange;
 }
.user{
  margin-top: 20px;
  display:flex;
  flex-direction: column;
}
}
.username{
  font-size: 20px;
  font-weight: bold;
  
  display: flex;
  align-items: center;
  
}
.touxiang{
  display: flex;
  align-items: center;
}
img{
  
   width: 100px;
    height: 100px;
    display: flex;
    border-radius: 50%;
    overflow: hidden;
}
.commonly-service{
   margin: 20px 0 60px;
  b{
    font-size: 22px;
    font-weight:bold;
    color: black;
  }
}
.tar{
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  div{
    
    height: 40px;
    font-size: 18px;
    padding: auto ;
    span{
  margin-left: 10px;
}
  }

button{
margin-left: 10px;
border:0;
border-radius: 10px;
background-color: rgb(35, 158, 35);
color: white;
// font-weight: bold;
font-size: 16px;
width: 80px;
height: 40px;
}
}
.foot{
  z-index: 1000;
  position: fixed;
  top:70px;
  bottom: 0;
  right: 0;
  left: 0;
  background: black;
  div{
    background: white;
    width: 300px;
    height: 300px;
    position: fixed;
  top:0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  .img{
    position: relative;
    img{
      position: absolute;
        top:0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
    }
  }
  }
  button{
    width: 120px;
    height: 50px;
    border-radius: 40px;
    border: 0 ;
    background: rgb(33, 33, 236);
    position: fixed;
    bottom: 10px;
    right: 10px;
    color: white;
    font-size: 20px;
  }
}
</style>